<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>檢查首爾標籤(大BOX)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">	
    <link rel="stylesheet" href="./4/lumen/bootstrap.css" media="screen">
    <link rel="stylesheet" href="./_assets/css/custom.min.css">
  </head>
  <body>
  <div class="container">
	<form>
	  <fieldset>
		<legend>檢查首爾標籤</legend>
		<div class="form-group row">
		  <label class="col-sm-2 col-form-label" for="inputDefault">目前大箱號1:</label>
		  <div class="col-sm-10">
		  <input class="form-control" placeholder="0220171221K00205" id="box" type="text">
		  </div>
		</div>	
		<div class="form-group row">
		  <label class="col-sm-2 col-form-label" for="inputDefault">目前小箱號:</label>
		  <div class="col-sm-10">
		  <input class="form-control" placeholder="17620T4003-7250613" id="sbox" type="text">
		  <input readonly="" class="form-control-plaintext" id="msg" value="" type="text">
		  </div>
		</div>
		<div class="form-group row">
		  <label class="col-sm-2 col-form-label" for="inputDefault">目前大箱號2:</label>
		  <div class="col-sm-10">
		  <input class="form-control" placeholder="17620T4003-7250613" id="box2" type="text">
		  <input readonly="" class="form-control-plaintext" id="msg2" value="" type="text">
		  </div>
		</div>	
		<div class="row">	
			<div class="col-sm-2">
			</div>
			<div class="col-sm-4">
				<ul class="list-group" id="lsBox" >
				</ul>
			</div>
			<div class="col-sm-4">
				<ul class="list-group" id="lsBoxB" >
				</ul>
			</div>
		
		</div>
	</form>
	<p class="lead">
    <a class="btn btn-primary btn-lg" href="index.html" role="button">返回</a>
	</p>
	
	</div>
    <script src="./_vendor/jquery/dist/jquery.min.js"></script>
    <script src="./_vendor/popper.js/dist/umd/popper.min.js"></script>
    <script src="./_vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./_assets/js/custom.js"></script>
	<script>
	var disks;
	var disksB;
	var cks=new Array(20);
	    cks[0]="Y";cks[1]="Y";cks[2]="Y";cks[3]="Y";cks[4]="Y";
		cks[5]="Y";cks[6]="Y";cks[7]="Y";cks[8]="Y";cks[9]="Y";
		cks[10]="Y";cks[11]="Y";cks[12]="Y";cks[13]="Y";cks[14]="Y";
		cks[15]="Y";cks[16]="Y";cks[17]="Y";cks[18]="Y";cks[19]="Y";

	    cks[20]="Y";cks[21]="Y";cks[22]="Y";cks[23]="Y";cks[24]="Y";
		cks[25]="Y";cks[26]="Y";cks[27]="Y";cks[28]="Y";cks[29]="Y";
		cks[30]="Y";cks[31]="Y";cks[32]="Y";cks[33]="Y";cks[34]="Y";
		cks[35]="Y";cks[36]="Y";cks[37]="Y";cks[38]="Y";cks[39]="Y";

		  var pass="Y";
		  var passB="Y";
		  var simple="N" 	
		
		$("#box").keypress(function(e){ //change
		  console.log($("#box").val());
		  $("ul").find("li").remove(); 
		  $("#msg2").val("");
		  $("#msg").val("");
		  var key = e.which;
		  if (key == 13) { 
			$.ajax({ url: "getBox.php?lot="+$("#box").val(), 
					dataType : "text",
					success: function(data){
					
					two_disks=data.split("|");
					disks=two_disks[0].split(",");
					console.log(two_disks[1]);
					disksB=two_disks[1].split(",");
					console.log(disksB);
					
					for(var i=0;i<disks.length;i++){
					 //console.log("sbox:"+i+":"+disks[i]);
					 $("#lsBox").append(' <li id="'+disks[i]+'" class="list-group-item d-flex justify-content-between align-items-center" value="'+i+'">'+disks[i]+'</li>');
					 if (disks[i]!=""){cks[i]="N";}		
					}
					
					console.log("disksB.length:"+disksB.length);
					
					if (disksB.length == 1) { 
						passB="N";  
						simple="Y"; 
					}
					console.log("simple:"+simple);
					for(var i=0;i<disksB.length;i++){
					 console.log("sbox:"+i+":"+disksB[i]);
					 $("#lsBoxB").append(' <li id="'+disksB[i]+'" class="list-group-item d-flex justify-content-between align-items-center" value="'+(20+i)+'">'+disksB[i]+'</li>');
					 if (disksB[i]!=""){cks[20+i]="N";}		
					}
					
				  }
				  });		  
			$("#sbox").focus();
		 }
		});	

		
		$("#sbox").keypress(function(e){
		  console.log($("#sbox").val());
		  dk=$("#sbox").val();
		  var key = e.which;
		  if (key == 13) { 
			sb="#"+dk; 
			if ($(sb).val() != undefined){
				$(sb).css('color', 'green');
				$("#sbox").val("");
				
				cks[parseInt($(sb).val())]="Y";
				
				$(msg).val("驗證通過");
			} else {
				$(msg).val("驗證失敗");
				$("#sbox").select();
			}
			pass="Y";
			for(var i=0;i<20;i++){
				if (cks[i]!='Y'){
					pass ="N";
					break;
				} 
				
			}
			if (simple=="Y") {passB="N";}
			else {passB="Y";}
			
			for(var i=20;i<40;i++){
				if (cks[i]!='Y'){
					passB ="N";
					break;
				}
			}
			
			if (pass =="Y" || passB =="Y"  ){
				//$("#box").select();
				$("#box2").select();
			}
			
		  }
		  });	
		  
		$("#box2").keypress(function(e){
		  console.log($("#box2").val());
		  dk=$("#box2").val();
		  var key = e.which;
		  if (key == 13) { 
			bx2="#"+dk; 
			if ($(bx2).val() != undefined){
				$(bx2).css('color', 'green');
				$("#box").select();
				$("#msg2").val("驗證通過");
			} else {
				$("#msg2").val("驗證失敗");
				
				$("#box2").select();
			}
		  
		  }
		  });	
		  
		  
	
	</script>
	
	
  </body>
</html>
